<!-- 单据分布 ——高扬添加-->
<script setup>
import { ref } from "vue";
import { useRouter } from "vue-router";
import vCharts from "vue-echarts";
import { OrderDistribution } from "@/api/workbench/list.ts";
// onMounted(() => {
//   setData();
// });
// ECharts配置选项
let months = [];
const router = useRouter();
const optionList = ref([]);
const handleClick = (e, warehouse_id) => {
  const { firstDay, lastDay } = getFirstAndLastDayOfMonth(months[e.dataIndex]);
  const query = { firstDay, lastDay };
  if (e.componentIndex == 0) {
    query.type = 10;
  } else if (e.componentIndex == 1) {
    query.type = 20;
  }
  if (typeof warehouse_id == "number") {
    query.warehouse_id = warehouse_id;
  }
  sessionStorage.setItem("_q", JSON.stringify(query));
  if (e.componentIndex == 0 || e.componentIndex == 1) {
    router.push({ path: "/bill" });
  } else if (e.componentIndex == 2) {
    router.push({ path: "/delete/document" });
  }
};
function getFirstAndLastDayOfMonth(dateString) {
  // 将日期字符串拆分为年和月
  const [year, month] = dateString.split("-").map(Number);

  // 创建一个 Date 对象，设置为给定年月的第一天
  const firstDay = new Date(year, month - 1, 1);

  // 创建一个 Date 对象，设置为下个月的第一天，然后回退一天，得到当月最后一天
  const nextMonth = new Date(year, month, 1);
  const lastDay = new Date(nextMonth - 1);

  // 格式化日期并返回结果
  const formatDate = date => {
    const year = date.getFullYear();
    const month = date.getMonth() + 1;
    const day = date.getDate();
    return `${year}-${month < 10 ? "0" : ""}${month}-${
      day < 10 ? "0" : ""
    }${day}`;
  };

  return {
    firstDay: formatDate(firstDay),
    lastDay: formatDate(lastDay),
  };
}
const setData = warehouse_id => {
    optionList.value = [];
  OrderDistribution({ warehouse_id: warehouse_id }).then(res => {
    months = res.x.month;
    //判断数据显示数值一样
    let maxValue = 0;
    res.y.forEach(item => {
      item.data.forEach(item1 => {
        item1.forEach(item2 => {
          if (item2 > maxValue) {
            maxValue = Math.ceil(item2 / 10) * 10;
          }
        });
      });
    });
    if (maxValue < 50) maxValue = 50;
    //判断入库单、调拨单、报废单数值
    res.y.map(item => {
      item.data1 = [[], [], []];
      item.data.map(d => {
        item.data1[0].push(d[0]);
        item.data1[1].push(d[1]);
        item.data1[2].push(d[2]);
      });
      optionList.value.push({
        id: item.warehouse_id,
        title: { text: item.name, textStyle: { fontSize: 14 } }, //字体更改
        grid: { top: 38 },
        tooltip: { trigger: "axis" },
        legend: {
          data: res.x.title,
          bottom: 24, // 调整图例距离底部的距离
        },
        xAxis: { type: "category", data: res.x.data },
        yAxis: { type: "value", min: 0, max: maxValue },
        color: ["#ae74ef", "#39ddcd", "#e72ea4"], // 设置颜色主题
        series: [
          {
            name: res.x.title[0],
            type: "bar",
            data: item.data1[0],
            barGap: "0%", // 消除不同系列的柱状图之间的间距
            emphasis: { focus: "series" },
            label: {
              show: true,
              position: "top",
            },
          },
          {
            name: res.x.title[1],
            type: "bar",
            data: item.data1[1],
            barGap: "0%", // 消除不同系列的柱状图之间的间距
            emphasis: { focus: "series" },
            label: {
              show: true,
              position: "top",
            },
          },
          {
            name: res.x.title[2],
            type: "bar",
            data: item.data1[2],
            barGap: "0%", // 消除不同系列的柱状图之间的间距
            emphasis: { focus: "series" },
            label: {
              show: true,
              position: "top",
            },
          },
        ],
      });
    });
  });
};
defineExpose({ setData });
</script>

<template>
  <el-card class="!border-none md:mr-2" shadow="never">
    <template #header>
      <span class="title">单据分布</span>
    </template>
    <el-scrollbar height="500px">
      <p>{{ item }}</p>
      <div class="content flex">
        <div class="item" v-for="item in optionList">
          <vCharts
            :option="item"
            :autoresize="true"
            @click="handleClick($event, item.id)"
            :style="{ height: '200px' }"
          />
        </div>
      </div>
    </el-scrollbar>
  </el-card>
</template>

<style scoped lang="scss">
.colorbg {
  color: var(--el-color-primary);
}
.scrollbar-demo-item {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 50px;
  margin: 10px;
  text-align: center;
  border-radius: 4px;
  background: var(--el-color-primary-light-9);
  color: var(--el-color-primary);
}
.title {
  width: 90px;
  font-size: 16px;
}
.content {
  flex-wrap: wrap;
  flex-direction: row;
  justify-content: flex-start;
  padding: 10px;

  margin-bottom: 40px;
  border-radius: 5px;

  .item {
    width: 30%;
    border-radius: 5px;
    // overflow: hidden;
    margin-right: 4.8%;
    margin-bottom: 40px;
    box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.5);
    &.item:nth-child(3n) {
      margin-right: 0;
    }
  }
}
</style>
